<template>
	<view class="homeList">
		<scroll-view class="categorys" >
			<view v-for="(item,index) in categorys" :key="index" :class="active == item.id?'selected':'category'" @click="switchNav(item.id)">
				<view class="cname" @click="">
					{{item.name}}
				</view>
			</view>
			
		</scroll-view>
		<scroll-view class="products" :scroll-y="true">
			<u-empty
					mode="data"
					icon="http://cdn.uviewui.com/uview/empty/data.png"
					width="320"
					height="320"
					textSize="28"
					text="商品为空"
					:show="products.length == 0 ? true :false"
			>
			</u-empty>
			<view v-for="(item,index) in products" :key="index" class="product">
				<view class="info" @click="seeProduct(item)">
					<img :src="item.image" alt="" style="width: 180rpx; height: 180rpx; border-radius: 10rpx;" mode="aspectFill"/>
					<view class="productInfo">
						<view class="pname" style="margin-left: 15rpx;margin-top: 10rpx;font-size: 34rpx; font-weight: 600;">
							{{item.name}}
						</view>

						<view class="" style="margin-left: 15rpx;margin-top: 20rpx;">
							<view class="" style="font-size: 20rpx; color: #666;">
								剩余数量 {{item.productNum}}
							</view>
							<view class="price" style=" color: crimson; margin-top: 10rpx;">
								￥{{item.price}}
							</view>
						</view>

					</view>
				</view>

				<view class="bt">
					<u-button @click="add(item)" type="primary" size="mini" text="+" shape="circle" style="width: 50rpx;"></u-button>
					<!-- <button style="background-color:#4A9BEE ; color: #fff; height: 55rpx; width: 50rpx; border-radius: 50%; font-size: 26rpx;">+</button> -->
					<!-- <button style="background-color: #4A9BEE; color: aliceblue; width: 50rpx; height: 50rpx;margin-top: 100rpx;" >+</button> -->
				</view>
			</view>
			<view class="" style="height: 180rpx;">
				<!-- 空 -->
			</view>
		</scroll-view>
		
		<!-- 弹窗，商品详情 -->
		<u-popup :show="show" :round="15" mode="center" @close="close" @open="open" >
				<view style="height: 680rpx; width: 500rpx;">
					<img :src="product.image" alt="" style="height: 500rpx; width: 500rpx; border-radius: 15rpx;" mode="aspectFill"/>
					<view class="" style="display:flex; align-items: center; justify-content: center; font-weight: 600; font-size: 40rpx;">
						{{product.name}}
					</view>
					<view class="" style="display:flex; align-items: center; justify-content: center; font-size: 24rpx; color: #666;" >
						剩余数量 {{product.productNum}}
					</view>
					<view class="" style="display: flex;justify-content: space-between; margin-top: 15rpx;">
						<view class="" style="font-weight: 600; font-size: 50rpx; color: #E94E3C; margin-left: 30rpx;">
							<text style="font-size: 30rpx;">￥</text>{{product.price}}
						</view>
						<view class="" style="width: 40%;margin-right: 30rpx;">
							<u-button @click="add(product)" type="primary" size="small" text="+" shape="circle" style="width: 50rpx;"></u-button>
						</view>
						
					</view>
				</view>
		</u-popup>
		
	</view>
</template>

<script>
	import {categoryList} from '@/api/category.js'
	import {productList} from '@/api/products.js'
	import {addShoppingCart} from '@/api/shoppingCart.js'
	export default {
		name:"homeList",
		data() {
			return {
				show: false,
				value: '',
				activeKey: 0,
				active:0,
				currentTab:0,
				categorys:["蛋糕","烤制类","饮料"],
				product:{
					image:'https://c-ssl.dtstatic.com/uploads/blog/202207/25/20220725212736_dc856.thumb.1000_0.png',
					name:'商品',
					price:'55',
					description:'description',
					productNum:0
				},
				products:[
					{
						image:"https://c-ssl.dtstatic.com/uploads/blog/202207/25/20220725212736_dc856.thumb.1000_0.png",
						name:"商品1",
						price:'55'
					},
					{
						image:"https://c-ssl.dtstatic.com/uploads/blog/202207/25/20220725212736_dc856.thumb.1000_0.png",
						name:"商品商品2",
						price:'65'
					},
					{
						image:"https://c-ssl.dtstatic.com/uploads/blog/202207/25/20220725212736_dc856.thumb.1000_0.png",
						name:"商品1",
						price:'55'
					},
					{
						image:"https://c-ssl.dtstatic.com/uploads/blog/202207/25/20220725212736_dc856.thumb.1000_0.png",
						name:"商品商品2",
						price:'65'
					},
					{
						image:"https://c-ssl.dtstatic.com/uploads/blog/202207/25/20220725212736_dc856.thumb.1000_0.png",
						name:"商品1",
						price:'55'
					},
					{
						image:"https://c-ssl.dtstatic.com/uploads/blog/202207/25/20220725212736_dc856.thumb.1000_0.png",
						name:"商品商品2",
						price:'65'
					},
					{
						image:"https://c-ssl.dtstatic.com/uploads/blog/202207/25/20220725212736_dc856.thumb.1000_0.png",
						name:"商品1",
						price:'55'
					},
					{
						image:"https://c-ssl.dtstatic.com/uploads/blog/202207/25/20220725212736_dc856.thumb.1000_0.png",
						name:"商品商品2",
						price:'65'
					},
					{
						image:"https://c-ssl.dtstatic.com/uploads/blog/202207/25/20220725212736_dc856.thumb.1000_0.png",
						name:"商品1",
						price:'55'
					},
					{
						image:"https://c-ssl.dtstatic.com/uploads/blog/202207/25/20220725212736_dc856.thumb.1000_0.png",
						name:"商品商品2",
						price:'65'
					},
					{
						image:"https://c-ssl.dtstatic.com/uploads/blog/202207/25/20220725212736_dc856.thumb.1000_0.png",
						name:"商品1",
						price:'55'
					},
					{
						image:"https://c-ssl.dtstatic.com/uploads/blog/202207/25/20220725212736_dc856.thumb.1000_0.png",
						name:"商品商品2",
						price:'65'
					},
					
				]
			};
		},
		onLoad(){
			
		},
		onReady(){
			this.products = []
			this.categorys = []
			this.init();
			
		},
		watch:{
			'$store.state.userInfo':function(newVal){
				if(newVal){
					this.init();
				}
			},
			'$store.state.storeId':function(newVal){
				if(newVal){
					this.init();
				}
			},
		},
		methods:{
			init(){
				const config = {
					type:1
				}
				categoryList(config).then(res=>{
					this.categorys = res.data
					this.currentTab = res.data[0].id
					this.active = res.data[0].id
					
					let config2 = {
						categoryId : this.currentTab,
						storeId : this.$store.state.storeId
					}
					console.log(config2)
					productList(config2).then(res=>{
						console.log(res)
						this.products = res.data
					}).catch(err=>{
						uni.showToast({
							title:err,
							type:'error',
							icon:'none'
						})
					})
					
				}).catch(err=>{
					uni.showToast({
						title:err,
						type:'error',
						icon:'none'
					})
				})
			},
			switchNav(index){
				console.log(index)
				if(this.currentTab == index){
					return
				}
				else{
					this.currentTab = index
					let config2 = {
						categoryId : this.currentTab,
						storeId : this.$store.state.storeId
					}
					console.log(config2)
					productList(config2).then(res=>{
						console.log(res)
						this.products = res.data
					}).catch(err=>{
						uni.showToast({
							title:err,
							type:'error',
							icon:'none'
						})
					})
					
				}
				this.active = index
			},
			open(){
			        // console.log('open');
			      },
			close() {
				this.show = false
				// console.log('close');
			  },
			seeProduct(e){
				this.product = e
				this.show = true
			},
			add(item){
				console.log(item)
				const config={
					inventoryId: item.id,
					productId: item.productId,
					storeId: this.$store.state.storeId
				}
				addShoppingCart(config).then(res=>{
					this.$store.state.shoppingCartChange = !this.$store.state.shoppingCartChange
					uni.showToast({
						title:'添加成功'
					})
				}).catch(err=>{
					uni.showToast({
						title:err
					})
				})
			}
		}
	}
</script>

<style scoped>
.homeList{
	margin-top: 350rpx;
	display: flex;
}
.categorys{
	width: 28%;
	background: #ebebeb;
	/* height: 870rpx; */
	height: 75vh;
	padding-bottom: 60rpx;
}
.category{
	height: 100rpx;
}
.products{
	width: 72%;
	height: 78vh;
}
.cname{
	height: 100%;
	line-height: 100rpx;
	text-align: center;
	color: #5f5f5f;
	
}
.selected{
  background-color: #fff;
  border-left: 2px solid #3C9CFF;
  font-weight: bold;
  color: #E54847;
}
.info{
	display: flex;
}

.product{
	height: 180rpx;
	display: flex;
	padding-top: 10rpx;
	padding-left: 10rpx;
	padding-right: 10rpx;
	justify-content: space-between;
}
.bt{
	margin-top: 100rpx;
	margin-right: 15rpx;
	
}

.popup-content {
		/* @include flex; */
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}

.popup-height {
	/* @include height; */
	width: 400rpx;
}

.text {
	font-size: 12px;
	color: #333;
}


</style>